import './index.scss';

import { Popconfirm } from 'antd';
import { FC } from 'react';

import DeleteIcon from '@/assets/icons/delete.svg';
import EditIcon from '@/assets/icons/edit.svg';
import { useDictStore } from '@/store/dict';

type IGetDecisionFlowNodeVariablesRes = any[];

interface VariableItemProps {
  data: Required<IGetDecisionFlowNodeVariablesRes>[0];
  hasAction?: boolean;
  onEdit?: (data: Required<IGetDecisionFlowNodeVariablesRes>[0]) => void;
  onDelete?: (data: Required<IGetDecisionFlowNodeVariablesRes>[0]) => void;
}

export const VariableItem: FC<VariableItemProps> = memo((props) => {
  const dictStore = useDictStore();

  return (
    <div className="var-item px-12 h-40 flex justify-between cursor-pointer items-center hover:bg-gray-100">
      <div className="flex gap-12 items-center">
        <div className="var-item__name text-value-12 bg-blue-100 h-20 px-4 py-0 rounded-4">
          {dictStore.fieldTypeMap[props.data.varType!]}
        </div>
        <div className="var-item__name text-value-14 bg-orange-100 px-12 py-4 rounded-4 !text-yellow-800">
          {props.data.varName}
        </div>
        {props.data.initValue && (
          <>
            <span>=</span>
            <div className="var-item__value text-value-14 bg-gray-100 px-8 py-2 rounded-4">{props.data.initValue}</div>
          </>
        )}
      </div>
      {props.hasAction && (
        <div className="var-item__action flex gap-8 py-8" onClick={(e) => e.stopPropagation()}>
          <EditIcon
            onClick={() => {
              props.onEdit?.(props.data);
            }}
            width={18}
            height={18}
            className="cursor-pointer"
          />
          <Popconfirm
            onConfirm={() => {
              props.onDelete?.(props.data);
            }}
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定删除?">
            <div>
              <DeleteIcon width={18} height={18} className="cursor-pointer" />
            </div>
          </Popconfirm>
        </div>
      )}
    </div>
  );
});
